<html>
<head>
<title>Presentation</title>
<meta charset='utf-8' />
<script src='slides.js'></script>
<link type="text/css" rel="stylesheet" href="css/scrollbar.css"/>
<link type="text/css" rel="stylesheet" href="css/curso.css"/>
</head>
<body style="display: none">
	
	<section class="slides layout-regular template-default">
      
		<!-- Your slides (<article>s) go here. Delete or comment out the slides below. -->
        
      	<article class="portada">
      		<header>
        		<h1>Curso de</h1>
        	</header>
        	<div class="logo-html">
        		<div>HTML</div>
				<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512'>
					<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>
					<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>
					<path fill='#EBEBEB' d='M256,208 L181,208 176,150 256,150 256,94 114,94 129,265 256,265zM256,355 L192,338 188,293 132,293 139,382 256,414z'/>
					<path fill='#FFF' d='M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 387,208zM255,94 L255,150 392,150 397,94z'/>
				</svg>
      		</div>
      		<div class="logo-css">
      			<div>CSS</div>
				<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512'>
					<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>
					<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>
					<path fill='#EBEBEB' d='M129,265 L256,265 256,208 124,208zM119,150 L256,150 256,94 114,94zM256,355 L132,322 139,382 256,414z'/>
					<path fill='#FFF' d='M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 397,94 255,94 255,150 336,150 330,208z'/>
				</svg>
      		</div>
      		<div class="logo-js">
      			<div>JS</div>
				<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512'>
					<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>
					<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>
					<path fill='#EBEBEB' d='M256,150 L256,94 255,94 114,94 118,150zM256,355 L192,338 188,293 132,293 139,382 256,414z'/>
					<path fill='#FFF' d='M336,150 L318,338 255,355 255,414 371,382 397,94 255,94 255,150z'/>
				</svg>
      		</div>
      		<footer>
      			Adri&aacute;n Seijo - Septiempre/Octubre 2011
      		</footer>
      	</article>

		<article>
        	<h2>&lt;javascript&gt;</h2>
		</article>
		
		<article>
			<h3>B&aacute;sico</h3>
			
			<p>
				No tiene nada que ver con Java! S&oacute;lo sintaxis C y orientaci&oacute;n a objetos. Marketing.
			</p>

			<ul>
				<li>Interpretado</li>
				<li>Tipado d&aacute;bil</li>
				<li>Orientado a objetos</li>
				<li>Prototipado</li>
			</ul>
			
			<p>
				Flexible. Defecto y virtud.
			</p>
		</article>
		
		<article>
			<p>
				Creado por Netscape en 1995.
			</p>
			
			<p>
				Javascript es marca de Oracle y Netscape (Mozilla). Explorer tiene JScript. El est&aacute;ndar ECMAScript.
			</p>
			
			<p>
				Primera versi&oacute;n del est&aacute;ndar en 1997. Segunda en 1998 y tercera en 1999. Par&oacute;n.
			</p>
			
			<p>
				Versi&oacute;n 4 abandonada por diferencias pol&iacute;ticas. Demsaido complejo, objetos y clases, etc. Microsoft se opuso.
			</p>
			
			<p>
				ECMAScript Harmony, consenso entre navegadores. Versi&oacute;n 5 en 2099. Strict mode, correcciones, mejoras en JSON, reflection, etc. Cambios menores. 
			</p>
			
			<p>
				Posibilidades de futuro: Clases, sistema de m&aacute;dulos, tipado, datos algebraicos (ya presentes en WebGL), etc.
			</p>
		</article>
		
		
		<article>
			
			<p>
				Usado principalmente en el navegador para que el usuario interactÃƒÂºe con el navegador y manipular el html
			</p>
			
			<p>
				Tiene otros usos fuera de lso navegadores, como en PDF, widgets e incluso como lenguaje de servidor en el desarrollo web (Rhino, Jaxer, Node.js, ...)
			</p>
			
			<p>
				El redimiento actual (en navegadores modernos) serÃƒÂ­a comparable a PHP en algunos de los test realizados y en torno a un 1.5 si lo comparamos con Java. (Node.js)
			</p>
			
		</article>
		
		<article>
			<h3>B&aacute;sico</h3>
			
			<p>
				Sentencias:
				<br/>
				<code class="prettyprint lang-js">
				if / else /else if, ? / :, switch, break, while, return, function, do / while, for, for / in, try / catch, throw, var , ...
				</code>
			</p>
			
			<p>
				Operadores: 
				<br/>
				<code>
					+ , - , *, /, =, ==, ===,  etc
					<br/>
					new, instanceof, this, typeof ,void, delete
				</code>
			</p>
			
			<p>
				Comentarios:
				<br/>
				<code class="prettyprint lang-js">
					// Una l&iacute;nea
					<br/>
					/*  Multil&iacute;nea */
				</code>
			</p>
		</article>
		
		
		<article>
			<h4>Variables</h4>
			
			<p>
				Tipado d&eacute;bil:
				<br/>
				<code class="prettyprint lang-js">
					var numero = 1;
				</code>
			</p>
			
			<p>
				Pero...
				<br/>
				<code class="prettyprint lang-js">
					numero.constructor 
					<br/>
					//Devuelve function Number() { [native code] };
				</code>
			</p>
			<p>
				AsÃƒÂ­ que:
				<br/>
				<code class="prettyprint lang-js">
					numero.constructor === Number;
					<br/>
					var numero = new Number(1);
				</code>
			</p>
			
		</article>
		
		<article>
			<p>
				Contextos de variables
			</p>
			
			<p>
				<code class="prettyprint lang-js">
				numero = 1;
				</code>
				<div>vs</div>
				<code class="prettyprint lang-js">
				var numero = 1;
				</code>
		
<pre class="prettyprint lang-js">
function metodo1() {
	numero1 = 1;		//window.numero1
	var numero2 = 2;	//privado metodo1.numero2
}

function metodo2() {
	alert(numero1);
	alert(numero2);	
}

metodo1();
metodo2(); // MostrarÃƒÂ¡ 1, undefined
</pre>
			</p>
			
		</article>
		
		<article>
			<h4>Tipos de variables</h4>
			
			<p>
				Primitivos
			</p>
			<ul>
				<li>Number</li>
				<li>String</li>
				<li>Boolean</li>
				<li>null</li>
				<li>undefined</li>
			</ul>
			
			<p>Conversi&oacute;n autom&aacute;tica, falsy!!!!</p>
<pre>
var a = '0'; 
alert(a == false); //true
alert(a === false); //false - comprueba boolean
</pre>
			
		</article>
		
		<article>
			<p>Objetos</p>
			
			<ul>
				<li>Array</li>
				<li>Date</li>
				<li>Function</li>
				<li>RegExp</li>
				<li>Object</li>
				<li>etc</li>
			</ul>
<pre class="prettify lang-js">
var numero = NUmber(1);
var cadena = String('Hola');
var array = new Array(1, 2, 3);
var array = [1, 2, 3];
...
</pre>
		</article>
		
		<article>
			<h4>M&eacute;todos</h4>
			
			<code class="prettyprint lang-js">function nombre() { //codigo }</code>
			<br/>
			<code class="prettyprint lang-js">var nombre = function() { //codigo }</code>
			
			<p>
				En cualquier caso
				<br/>
				<code class="prettyprint lang-js">
				nombre.constructor === Function;
				<br/>
				nombre.name === 'nombre';	
				</code>
			</p>
			
			<p>
				Puede pasarse a otra funci&oacute;n
<pre class="prettyprint lang-js">
function m1 () { alert('hola'); }

function m2(metodo) { metodo(); }

m2(m1); // MostrarÃƒÂ¡ alert con 'hola';
</pre>
			</p>
		</article>
		
		<article>
			<p>
				Closures
<pre class="prettyprint lang-js">
function m1() {
	function m2() {
	alert('hola');
	}
	
	m2();
}

m1(); // MostrarÃƒÂ¡ 'hola'
</pre>
			</p>
			<p>
				AnÃƒÂ³nimas / Autoejecutadas
<pre class="prettyprint lang-js">
(function () {
	alert('hola');
})();
//MostrarÃƒÂ¡ 'hola'
</pre>
			</p>
		</article>
		
		<article>
			<p>Sin sobrecargas</p>
<pre class="prettyprint lang-js">
function m1(a) { alert('m1'); }

function m1(a, b) { alert('m2'); }

m1(1); //MostrarÃƒÂ¡ m2, la ÃƒÂºltima en definirse
</pre>
			<p>Ni valores por defecto </p>
			<p>
				Argumentos dinÃƒÂ¡micos
<pre class="prettyprint lang-js">
function m1(a, b, c) { 
	alert(arguments);
}

m1(1, 2, 3); //MostrarÃƒÂ¡ [1, 2, 3]
</pre>
			</p>
		</article>
		
		<article>
			<h4>OO</h4>
			
			<p>
				Todo es un objeto, pero no hay class!
			</p>
<pre class="prettyprint lang-js">
class Circulo{ 
	
}

//Error!
</pre>
			
			<p>
				Pero hay new!!!
			</p>
<pre class="prettyprint lang-js">
var cadena = new String('hola')
</pre>
		</article>
		
		<article>
			<h4>OO</h4>
			
			<p>
				Clasico con metodos
			</p>
			<p>
				Prototipado con objetos, se usa uno de base y se modifican sus propiedades
			</p>
		</article>
		<article>
<pre class="prettyprint lang-js">
//No es la forma correcta
function Circulo(a) {
	
	var radio; //Atributo privado
	
	this.area = 0; //Atributo publico
	
	//Metodo privado
	function calcularArea() {
		this.area = radio * ...;
	}
	
	//Metodo publico
	this.cambiarRadio(b) = function() {
		radio = b;
		calcularArea();
	}
	
	//Constructor
	radio = a;
	calcularArea();
}

var circulo = new Circulo(15);
circulo.radio; //Error
circulo.calcularArea() //Error
circulo.area;
circulo.CAmbiarRadio();

</pre>
			</article>
			<article>
				<p>La forma correcta es con prototipos</p>
				
				<p>Partes de un objeto base y lo modificas</p>
				
<pre class="prettyprint lang-js">
Number.prototype.add1 = function() { return this +  1 };
var numero = 1;
numero.add1(); // 2	
</pre>
				<p>No todo es modificable, pero casi, lo cuald a problemas (Object.prototype y for in)</p>
				
				<p>En ES5 se puede especificar si una propiedad, metodo etc, es enumerable, modificable, borrable, etc</p>
			</article>
			
			<article>
<pre class="prettyprint lang-js">
funcion Circulo() {
}	

var circulo1 = new Circulo();
var circulo2 = new Circulo();

Circulo.prototype.metodo = function() {};

circulo1.metodo();
circulo2.metodo();
</pre>				
			</article>
			
			<article>
				<p>O lo clonas (siempre partes de algo, como m&iacute;nimo de Object)</p>
<pre class="prettyprint lang-js">
//var Circulo = Object.create({ ... });
var Circulo = {
	radio: 5,
	calcularArea: function(radio) { this.radio = radio * ... }
};

var circulo = Object.create(Circulo);
circulo.radio; //5

var CirculoBorde = Object.create(Circulo);
CirculoBorde.borde = 0;
CirculoBorde.cambiarBorde = function(){ ... };

var circulo2 = Object.create(CirculoBorde);
circulo2.radio;
circulo2.borde;
</pre>			
			</article>
			
			<article>
				
				<h3>Consola js</h3>
				
				<p>
					Todos los navegadores modenros incorporan una consola js que nos permite probar e interactuar con la página
				</p>
				
				<p>
					Consola: nos permite ejecutar javascirpt en el contexto actual (+breakpoints).
				</p>
				
				<p>
					Debug: La consola nos permite poner puntos de interrupción y debuguear el js, e incluso en algunos casos modificarlo en tiempo de ejecución
				</p>
				
				<p>
					Además nos dan métodos de registro, como console.log, console.info, console.group, console.groupEnd, etc...
				</p>				
				
			</article>
			
			<article>
				<h3>JS y HTML</h3>
				
				<p>
					A&ntilde;adir js a una p&aacute;gina
					
<pre class="prettyprint lang-js">
&ltscript src="ruta/al/archivo/js"&gt;&lt;/script&gt;
</pre>
				</p>
				
				<p>
					Head vs Body. Cuesti&oacute;n de prioridad y rendimiento					
				</p>
				
				<p>
					La ejecuci&oacute;n del js es inmediata, se parsea la p&aacute;gina y caundo se encuentra el tag script se ejecuta el javascript
				</p>
				
				<p>
					Accesibilidad. Tag &lt;noscript&gt;, no debe usarse, implícito en html (como fallback para estadísticas puede, pero es por el truco de usar un img o script como llamada http). 
				</p>
				
				<p>
					Formas de conseguir el efecto, onload, ondocumentready, html.className,...
				</p>
				
			</article>
			
			<article>
				<h4>DOM (Document Object Model)</h4>
				
				<p>
					Es el api que nos permite interactuar con un documento html dentro del navegador
				</p>
				
				<p>
					Dos elementos principales: "window" y "document"
				</p>
				
				<p>
					"window" define, además del objeto global de js, la ventana del navegador con toda su información:
				</p>
				
				<ul>
					<li>window.alert</li>
					<li>window.open / window.close</li>
					<li>window.location</li>
					<li>window.innerHeight / window.innerWidth</li>
					<li>window.setTimeout, window.setInterval</li>
				</ul>

			</article>

			<article>
				
				<p>
					"document" representa la raíz el propio documento html (no acceder a html directamente o a head) y también tiene una serie de métodos y atributos:
				</p>
				
				<ul>
					<li>document.title</li>
					<li>document.cookies</li>
					<li>document.location</li>
				</ul>
				
				<p>
					Dentro de document es donde se encuetran listados como nodos todos los elementos de la página
				</p>
				
				<p>
					Ambos incluso comparten atributos, como location (para nuestra desgracia...).
				</p>
				
			</article>
			
			<article>
				
				<h4>Como recuperar un elemento de la página</h4>
				
				<p>
					"document" contiene una seri de métodos que nos permiten recuperar los elementos de una página:
				</p>
				
<pre class="prettyprint lang-js">
getElementById('id_del_elemento'); //Ojos si se repite en IE
getElementsByTagName('div');
getElementsByName('name_del_elemento');
querySelector('.claseCss'); //Decuelce 1 elemento (IE8+)
querySelectorAll('.claseCss'); //Devuelve varios elementos (IE8+)
</pre>

				<p>
					Ojo con los métodos que deuvelven varios elementos, son colecciones "vivas" (live collections)!!!
				</p>
				
				<p>
					No sólo document, sino también otro elementos!! <br/> 
<pre class="prettyprint lang-js">
document.getElementsByTagName('form')[0].getElementsById('nombre_del_elemento')
</pre>
				</p>
			</article>
			<article>
				
				<h4>Como acceder a sus propiedades e hijos</h4>
				
				<p>
					Para acceder a los hijos de un elemento podemos usar los mismos métodos anteriores
				</p>
				
				<p>
					Admeás tenemos:
				</p>
				
<pre class="prettyprint lang-js">
.childNodes[]; //Array (colección viva) con los hijos 
.firstChild; //Atributo, primer hijo
.lastChild; //Atributo, último hijo
.parentNode; //Atributo, padre
.previousSilbing; //Atributo, hermano
.nextSilbing; //Atributo, hermano
</pre>
				
				<p>
					Ojo childNodes también puede contar saltos de línea y comentarios. la propiedad .children[] lo arregla (IE8+);
				</p>				
			</article>
			
			<article>
				<h4>Como acceder, modificar y eliminar propiedades</h4>
				
<pre class="prettyprint lang-js">
var elemento = document.getElementById('nombre');

elemento.id;	
elemento.getAttribute('id');

elemento.id = 'nombre2';
elemento.setAttribute('id', 'nombre2');

elemento.removeAttribute('id');
elemento.id = null;			//null
elemento.id = undefined		//undefined
delete elemento.id; 		//undefined
</pre>
					
				</p>
				
				<p>
					.getAttribute para atributos personalizados
<pre class="prettyprint lang-html">
&lt;input type="date" data-format="dd/mm/yyyy"/&gt;
</pre>
					
				</p>
				
			</article>
			
			<article>
				
				<h4>Como crear y elimianr elementos</h4>
				
<pre class="prettyprint lang-js">
var input = document.createElement('input');
input.type = 'date';
input.value = '10/10/2011';
input.setAttribute('data-format', 'dd/mm/yyyy');
document.body.appendChild(input);

document.body.innerHTML += 
'&lt;input type="text" value="10/10/2011" data-format="dd/mm/yyyy"/&gt;';
</pre>
					
<pre class="prettyprint lang-js">
var input = document.querySelector('input[type="date"]');
input.parentNode.removeChild(input);

var parent = document.querySelector('.contenedor_fecha');
parent.innerHTML = ''; //Ojo, borras todos los hijos
</pre>
			</article>

			
			<article>
				
				<h4>Eventos</h4>
				
				<p>
					Podemos controlar como interactura el usuario con la página: clicks, movimeintos de ratón, puslaciones de teclado, redimensión del navegador, etc.
				</p>
				
				<p>
					Tmaibén podemos controlar el comportamiento de elementos de la página como al carga de imágenes (onload);
				</p>
			</article>
			
			<article>
				<p>
					Dos modelos distintos, capture:
				</p>
<pre>
               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------
</pre>
				<p>
					bubbling
				</p>
<pre>
               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------
</pre>
			</article>
			
			<article>
				
				<p>
					Como controlamos los eventos:
				</p>
			
<pre class="prettyprint lang-html">
&lt;input type="date" id="fecha" onclick="alert(this.id);"/&gt; //Mal!!!!!
</pre>

<pre class="prettyprint lang-js">
var fecha = document.getElementById('fecha');

funciton hola() {
	alert(this.id);
}

fecha.onclick = hola;		//Algo mal!!!

fecha.addEventListener('click', hola, false); //capture opcional
fecha.attachEvent('onclick', hola);	//IE (-9)
</pre>
			</article>
			
			<article>
				<p>
					De la misma forma
				</p>
				
<pre class="prettyprint lang-js">
var fecha = document.getElementById('fecha');

funciton hola() {
	alert(this.id);
}


fecha.onclick = null;

fecha.removeEventListener('click', hola);
fecha.deattachEvent('onclick', hola);
</pre>
				
				<p>
					Ejemplos de eventos: mouseover, mouseout, keypress, keydown, keyup, resize, click, change, etc.
				</p>
				
			</article>
			
			<article>
				
				<p>
					En estos métodos de eventos tenemos un objeto event con información dle evento, como la posición del curso, la tecla pulsada o la referencia al propio elemento
				</p>
				
<pre class="prettyprint lang-js">
function hola(event) {
	
	e = event || window.event;
	
	alert(e.target || e.srcElement); //Elemento
	
	if (e.pageX || e.pageY) {
		//Posicion relative al documento (IE9+)
		posx = e.pageX;			
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) {
		//Posicion relativa a la ventana
		posx = e.clientX + document.body.scrollLeft	
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
}
</pre>
				
			</article>
			
			<article>
				
				<h4>Frameworks</h4>
				
				<p>
					Debido a los problemas de compatibilidad, y en gran parte al desconocimiento del lenguaje, mucha gente recurre a librearías js para solcuionar estos problemas
				</p>
				
				<p>
					Las hay que extienden js usando prototipos, como <a href="http://sugarjs.com/" target="_blank">Sugar</a>. 
				</p>
				
				<p>
					Los hay que modifican la sintaxis de js, como <a href="http://jquery.com/" target="_blank">jQUery</a>.
				</p>
				
				<p>
					Los hay que definen su propio lenguaje que s compilado a js, como <a href="http://code.google.com/intl/es/webtoolkit/" target="_blank">GWT (Java)</a>, <a href="http://jashkenas.github.com/coffee-script/">Coffescript (propio)</a> o <a href="http://www.dartlang.org/" target="_blank">DART()</a>
				</p>
				
				<p>
					Cuanto más se cambia respecto a la sintaxis original más problemas de rendimiento...
				</p>
				
			</article>
		<!--
		//Orden de ejecuciÃƒÂ³n
		//Namespaces mediante JSON
		//Consolas: console.log, debug, etc.
		//DOM, DOM y DOM
		//Experimental API: Notifications, Geolocation, Fullscreeen, Audio/Video API, CAnvas, WebGL, etc.
		//Frameworks: JQuery, ExtJS, Mootools, Sugar, etc.
		//Compilados: GWT, Coffescript, etc.
		-->
	</section>
</body>
</html>